<template>
    <div>
        <setHeader title="产品添加" settext="完成" @done="gotobtn()"></setHeader>
        <div class="content">
            <div class="write_input_box clear" v-show="select_show">
            <!-- 所属企业搜索 -->
            <div class="main_productinsert">
                <el-row class="block-col-2">
                    <el-col :span="24">
                        <el-dropdown trigger="click" @command="handleCommand" >
                            <span class="el-dropdown-link" style="padding: 0 0.2rem;">
                                所属企业：{{companyName}}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown" style="width: 7.5rem;margin-left: -3.75 !important; margin-top:0 !important;left:0 !important;padding:0 !important;">
                                <el-dropdown-item icon="el-icon-plus" v-for="(colleague, ind) in CompanyList" :key="ind" :command="colleague" >{{colleague.name}}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>  
            </div>
            </div>
            <div class="write_input_box">
                <label for="">产品名称：</label>
                <input type="text" placeholder="" v-model="productInserts.chrName">
            </div>
            <div class="write_input_box">
                <label for="">产品价格：</label>
                <input type="number" placeholder="" v-model="productInserts.Price">
            </div>
            <div class="main_news_content">
               <label for="">产品简介：</label>
                <textarea placeholder="请输入产品简介"  style="-webkit-user-select:auto;"  contenteditable="true"  v-model="productInserts.summary"></textarea>
            </div>
            <div class="main_news_content">
               <label for="">产品详情：</label>
                <textarea placeholder="请输入产品详情"  style="-webkit-user-select:auto;"  contenteditable="true"  v-model="productInserts.Attached"></textarea>
            </div>
            
            <div class="insert_pic">
                <label for="">添加图片：</label>
                
                <div class="main-product_manage">
                    <ul>
                        <li>
                            <camera v-on:spot="spot" :type="type"></camera>
                        </li>
                    </ul>
                </div>   
            </div>
        </div>
        <so-footer></so-footer>
    </div>
</template>

<script>
import setHeader from '../public/setHeader.vue';
import soFooter from '../components/footer-bar';
import camera from '../public/info_bar';
import { MessageBox } from 'mint-ui';

    export default {
        data() {
            return {
                proImg: '',
                productInserts: {
                    chrName: '',
                    Price: '',
                    access_token: '',
                    c_id: '',
                    summary:'',
                    Attached:''
                },
                companyName: '所有企业',
                CompanyList:'',
                userInfo:'',
                proData:'',//图片数据
                // pro_name: '灰色纱布懒人沙发',
                // pro_money: '388',
                hostlist: [
                    { 
                        link: '',
                    }
                ],
                type:'add',
                cpId:'',
                select_show:false,
            }
        },
        mounted() {
            let that = this;
            that.userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
            that.cpId = that.$route.query.cpId;
            if(that.cpId == 0){
                that.select_show = true;
            }
            //获取当前用户的企业列表
            that.getUserCompany();
        },
        methods: { 
            spot:function(data){
                this.proData = data;
                console.log(data)
            },
            gotobtn() {
                if(this.cpId == ''){
                    MessageBox.alert('请您选择企业');return false;
                }
                if(!this.productInserts.chrName) {
                    this.$openTips({
                        text: "产品名称不能为空",
                        time:1000
                    });
                    return;
                }
                if(!this.productInserts.Price) {
                    this.$openTips({
                        text: "产品价格不能为空",
                        time:1000
                    });
                    return;
                }
                if(this.proData.length < 1) {
                    this.$openTips({
                        text: "产品图片不能为空",
                        time:1000
                    });
                    return;
                }
                this.productInserts.access_token = window.localStorage.getItem('access_token');
                this.productInserts.c_id = this.cpId;
                this.productInserts.pro = this.proData;

                console.log('cp_id', this.productInserts + ',');

                this.$post(this.$path + '/index.php/api/ProductAdd', this.productInserts).then((response) => {
                    console.log('添加产品', response); 
                    if(response.code == 200) {
                        this.$router.replace({
                            path: '/userCenter/productManage',
                            query: {cp_id: this.productInserts.c_id,u_type:1}
                        })
                    }else {

                    }
                    // newsManage?cp_id=42
                })
            },
            //获取当前用户的企业
            getUserCompany:function(){
                let that = this;
                let userId = that.userInfo.uid;

                this.$fetch(that.$path+'/api.php/Company/getUserCompanyList',{userId})
                .then((res) => {
                console.log('圈子企业',res);
                that.CompanyList = res.data;
                })
            },   
            handleCommand(command) {
                this.companyName = command.name;
                this.cpId = command.id;
                console.log(this.companyName)
            },
        },
        components: {
            setHeader,
            camera,
            soFooter
        }
    }
</script>

<style>
.main_productinsert .el-row {
    border-bottom: 0 !important;
}
/* 全部同事 */
.el-col-24 {
    height: 1rem;
    line-height: 1rem;
    /* padding: 0 0.2rem; */
    box-sizing: border-box;
    background-color: #fff;
}
/* 全部同事第一层级 */
.el-col-24 .el-dropdown {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    box-shadow: none;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    display: block;
}
/* 文字 */
 .el-dropdown-link {
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
    cursor: pointer;
    display: block;
    border-bottom: 1px solid #d8d8d8;
}
  /* 下拉icon */
.el-icon--right {
    float: right;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
}
/* 下拉层级 */
/* .el-dropdown-menu {
    width: 100% !important;
    height: 6rem;
    -webkit-box-shadow: none;
    box-shadow: none;
    top: 0 !important;
    left: 0 !important;
    margin: 0;
    padding: 0;
    margin-top: 1.88rem !important;
    overflow-y: auto;
} */
/* 三角符号 */
.el-popper .popper__arrow, .el-popper .popper__arrow::after {
    display: none;
}
/* 下拉item */
.el-dropdown-menu__item {
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
    padding: 0 0.2rem;
    box-sizing: border-box;
}

/* 添加图片 */
.insert_pic {
    padding: 0.3rem 0;
    box-sizing: border-box;
}
.insert_pic label {
    font-size: 0.28rem;
    color: #333;
    text-align: left;
    display: block;
    padding-left: 0.23rem;
}

/* 图片排列 */
.main-product_manage {
    padding-top: 0.2rem;
}
.main-product_manage ul {
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}
.main-product_manage ul>li {
    text-align: center;
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 0.3rem;
    /* margin-left: 0.23rem; */
}
.main-product_manage img {
    width: 2rem;
}

/*编辑产品简介*/
.main_news_content textarea{
    width: 5.8rem;
    height: 3.04rem;
    outline: none;
    font-size: 0.28rem;
    color: #333;
    border:0;
}
.main_news_content{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    /* border-top: 1px solid #d8d8d8; */
    border-bottom: 1px solid #d8d8d8;
    padding: 0.2rem 0 0 0.2rem;
}
.main_news_content label {
    width: 1.4rem;
    font-size: 0.28rem;
    color: #333;
    text-align: left;
}


/* 添加 */
/* .main-product_manage .add_active {
    width: 2.2rem !important;
    height: 2.2rem !important;
    background-color: #F2F2F2 !important;
    border-radius: 4px !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    margin-left: 0.23rem !important;
    padding-top: 0.01rem;
} 
.main-product_manage .add_active span {
    width: 1rem;
    height: 1rem;
    background-color: #e50838;
    border-radius: 50%;
    display: block;
    margin: 0.49rem;
}
.main-product_manage .add_active .icon-jia {
    font-size: 0.48rem;
    line-height: 1rem;
    vertical-align: text-top;
    text-align: center;
    color: #fff;

} */





</style>